<template>
  <div class="agencyDetails">
    <!-- 查询 -->
    <div class="search">
      <div class="displayPage">
        <p class="p">一级拉新时间</p>
        <el-date-picker
          style="margin-right: 20px"
          v-model="TimeVal"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
          value-format="yyyy-MM-dd"
          @change="focus"
        >
        </el-date-picker>
      </div>
      <el-input placeholder="请输入内容" v-model="id">
        <template slot="prepend">一级ID</template>
      </el-input>
      <el-input placeholder="请输入内容" v-model="ids">
        <template slot="prepend">二级ID</template>
      </el-input>
      <el-button @click="search">搜索</el-button>
    </div>
    <!-- 表格 -->
    <!-- <div class="nav">
      <div class="content" v-for="(item, index) in arr" :key="index">
        <p>{{ item.name }}</p>
        <p>{{ item.Num }}</p>
      </div>
    </div> -->
    <!-- @expand-change="expandChange" -->
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      v-loading="loading"
    >
      <el-table-column prop="create_time" label="时间">
        <template slot-scope="scope">
          {{ scope.row.create_time }}
        </template>
      </el-table-column>
      <el-table-column prop="id_code" label="拉入新人ID"> </el-table-column>
      <el-table-column prop="nick_name" label="昵称"> </el-table-column>
      <el-table-column prop="relationship" label="关系"> </el-table-column>
      <!-- <el-table-column prop="total_promote" label="获利金币奖励数">
      </el-table-column> -->
      <el-table-column prop="total_comis" label="获利宝石奖励数">
      </el-table-column>
      <el-table-column prop="total_promote" label="二级个数"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="toogleExpand(scope.row)">详情</el-button>
        </template>
      </el-table-column>

      <!-- 二级表格 -->
      <el-table-column type="expand" width="1">
        <template slot-scope="scope">
          <el-table :data="scope.row.list" v-loading="loading1">
            <el-table-column prop="create_time" label="拉入时间">
              <template slot-scope="scope">{{
                scope.row.create_time
              }}</template>
            </el-table-column>
            <el-table-column prop="id_code" label="二级ID"> </el-table-column>
            <el-table-column prop="nick_name" label="昵称"> </el-table-column>
            <el-table-column prop="relationship" label="关系">
            </el-table-column>
            <!-- <el-table-column prop="" label="获利金币奖励数"> </el-table-column> -->
            <el-table-column prop="total_comis" label="获利宝石奖励数">
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="page"
      :limit.sync="pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { userPull_api } from "@/api/UserManagement";
import Pagination from "@/components/Pagination"; // 分页
import moment from "moment";
export default {
  components: { Pagination },
  props: ["userId"],
  data() {
    return {
      id: "", //一级ID
      ids: "", //二级ID
      // 筛选参数
      TimeVal: "", //时间日期选择
      //   日期时间选择器数组
      pickerOptions: {
        disabledDate(platformValue) {
          return platformValue.getTime() > Date.now() - 8.64e6;
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      timeStart: "", //开始时间
      timeEnd: "", //结束时间

      // 表头自定义数据
      arr: [
        { name: "拉新人数:", Num: "0" },
        { name: "获利金币奖励数:", Num: "0" },
        { name: "获利宝石奖励数:", Num: "0" },
      ],
      tableData: [], //表格
      loading: false,
      loading1: false, //二级表格加载
      total: 0,
      page: 1,
      pageSize: 10,
    };
  },
  methods: {
    //获取开始/结束时间
    focus(time) {
      if (!this.TimeVal) {
        this.TimeVal = [];
      }
      this.timeStart = this.TimeVal[0];
      this.timeEnd = this.TimeVal[1];
    },

    // 获取二级表格
    async toogleExpand(row) {
      let $table = this.$refs.multipleTable;
      $table.toggleRowExpansion(row);
      this.loading1 = true;
      let { code, data } = await userPull_api({
        user_id: row.id_code,
      });
      if (code == 0) {
        row.list = data.list;
        this.loading1 = false;
      }
    },
    getList() {
      this.getUserPull();
    },
    // 获取列表
    async getUserPull() {
      if (!this.userId) {
        return;
      }
      this.loading = true;
      let { code, data } = await userPull_api({
        user_id: this.userId,
        page: this.page,
        pageSize: this.pageSize,
        startTime: this.timeStart,
        endTime: this.timeEnd,
        onePull: this.id,
        twoPull: this.ids,
      });
      if (code == 0) {
        console.log(data, "9527");
        this.tableData = data.list;
        this.total = parseInt(data.count);
        this.loading = false;
      }
    },
    search() {
      this.getUserPull();
    },
  },
  // filters: {
  //   time(value) {
  //     return moment(value).format("YYYY-MM-DD ");
  //   },
  // },
};
</script>

<style lang="less" scoped>
.agencyDetails {
  margin: 10px;
  .search {
    display: flex;
    flex-wrap: wrap;
    .displayPage {
      display: flex;
    }
    .p {
      border: 1px solid #dcdfe6;
      border-right: 0px;
      height: 40px;
      line-height: 20px;
      margin: 0px;
      background: #f5f7fa;
      color: #909399;
      font-size: 14px;
      padding: 10px;
      border-radius: 4px 0px 0px 4px;
    }
    .el-input {
      width: 260px;
      margin-right: 30px;
      margin-bottom: 10px;
    }
    .el-button {
      margin-bottom: 10px;
    }
  }
  .nav {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-bottom: 20px;
    .content {
      display: flex;
      font-size: 18px;
      font-weight: bold;
      p {
        margin-right: 5px;
      }
    }
  }
}
</style>